<template>
	<view class="invoice">
		<view class="invoice_list">
			<view class="invoice_record_item" v-for="item in invoiceList.lists" :key="item.id">
				<view class="invoice_form_info">
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">开票抬头</span>
						<span class="fn-sz-28 fn-cl-333333">{{ item.name }}</span>
					</view>
					<view class="invoice_form_info_row_box" v-if="item.tax_num">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">纳税人识别号</span>
						<span class="fn-sz-28 fn-cl-333333">{{ item.tax_num }}</span>
					</view>
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">开票金额</span>
						<span class="fn-sz-28 fn-cl-333333">￥{{ item.total_fee }}</span>
					</view>
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">开票时间</span>
						<span class="fn-sz-28 fn-cl-333333">{{ item.create_time }}</span>
					</view>
				</view>
				<view class="invoice_record_status">
					<span v-if="item.status == 1">待开票</span>
					<span v-if="item.status == 2">已开票</span>
				</view>
			</view>
		</view>
		<view class="fix_btn_box">
			<button class="white_btn" @tap="goLink('/pages/invoice/invoiceInfo')">开票信息</button>
			<button class="yellow_btn" @tap="goLink('/pages/invoice/invoiceApply')">申请开票</button>
		</view>
	</view>
</template>

<script>
import com from '../../mixin/index.js';
export default {
	data() {
		return {
			page: {
				page: 1,
				page_size: 10
			},
			invoiceList: {
				lists: [],
				total: 1,
				total_page: 0
			}
		};
	},
	mixins: [com],
	onShow() {
		this.page = {
			page: 1,
			page_size: 10
		};
		this.invoiceList = {
			lists: [],
			total: 1,
			total_page: 0
		};
		this.getInvoiceList();
	},
	onReachBottom() {
		this.getInvoiceList();
	},
	methods: {
		getInvoiceList() {
			this.getList('invoiceList', 'getInvoiceList', 'page', { ...this.page });
		}
	}
};
</script>

<style lang="scss">
.invoice {
	padding: 24rpx 24rpx 100rpx;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: #f9f9f9;
	.invoice_list {
		.invoice_record_item {
			display: flex;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 26rpx 31rpx;
			justify-content: space-between;
			.invoice_form_info {
				.invoice_form_info_row_box {
					margin-bottom: 12rpx;
				}
			}
			.invoice_record_status {
				flex: none;
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
			}
		}
	}
	.fix_btn_box {
		position: fixed;
		bottom: 20rpx;
		width: 94%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 5rpx;
		button {
			flex: 1;
			&:nth-child(1) {
				margin-right: 10rpx;
			}
		}
	}
}
</style>
